<template>
  <div class="content-block block---1">
    <div class="info-head">{{ title }}</div>
    <div class="info-content padding">
      <el-table
        ref="table"
        :data="lists" height="300px"
        highlight-current-row
        lazy border
        :load="loadMore"
        row-key="uuid"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :header-cell-style="{
          backgroundColor: themeColor,
          color: 'white'
        }"
        @row-click="(row) => current = row"
      >
        <div slot="empty" class="empty-lists">
          <i class="i-custom:search"></i>
          <span class="empty-text">暂无数据</span>
        </div>
        <el-table-column
          v-for="(column, index) in columns" :key="column.prop" v-bind="column"
          :align="index === 0 ? 'left' : 'center'"
          :min-width="index < 2 ? 260 : 200"
          :fixed="index === 0"
        >
          <template v-if="needWrapUnit(column.label) && false" #header>
            <div class="wrap-unit-in-thead-name">{{ wrapUnit(column.label).name }}</div>
            <div class="wrap-unit-in-thead-unit">{{ wrapUnit(column.label).unit }}</div>
          </template>
          <template v-if="column.prop === 'industryName'" #default="{ row }">
            <el-link
              v-if="!row.hasChildren"
              :underline="false"
              type="primary"
              class="text-truncate"
              style="font-size: 12px"
              :title="row.industryName"
              @click="navigateToEnterpriseAnalysis(row, 'enterpriseCode')"
            >
              {{ row.industryName }}
            </el-link>
            <span class="text-truncate" v-else>{{ row.industryName }}</span>
          </template>
          <template v-if="column.children" #default>
            <el-table-column
              v-for="(child, cindex) in column.children"
              :key="cindex"
              v-bind="child"
              align="center"
            ></el-table-column>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Navigate2enterpriseAnalysis from '@/mixins/navigate2enterpriseAnalysis'
import MixinWrapUnitInThead from '@/mixins/wrap-unit-in-thead';

import { uuid, defaultNumber, restoreFormatNumber, isWebkit } from '@/utils'

export default {
  name: 'grid-item-one',
  mixins: [Navigate2enterpriseAnalysis, MixinWrapUnitInThead],
  props: {
    data: {
      type: Object,
      default () {
        return {};
      },
    },
  },
  data () {
    return {
      current: null
    };
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    title () {
      return this.data.name || '';
    },
    columns () {
      return this.data.thead || [];
    },
    lists() {
      const keys = ['industryCode', 'industryName'];
      (this.data.tbody || []).forEach(item => {
        Object.keys(item).forEach(key => {
          if (!keys.includes(key)) {
            item[key] = defaultNumber(item[key]);
          }
        })
      })
      return (this.data.tbody || []).map(item => ({
        ...item,
        uuid: uuid(),
        children: [],
        hasChildren: true
      }));
    },
    total () {
      return this.columns.filter(item => item.prop !== 'industryName')
        .map(item => {
          return this.acculate(item.prop).toFixed(2)
        })
    },
  },
  watch: {
    lists (val) {
      if (val && val[0]) {
        this.$refs.table.setCurrentRow(val[0]);
        this.current = val[0];
        setTimeout(() => {
          if (isWebkit()) {
            this.$refs.table.layout.gutterWidth = 14
          }
          this.$refs.table.doLayout();
        }, 100);
      }
    },
    current: {
      deep: true,
      immediate: true,
      handler (val) {
        if (val) {
          this.$emit('industry-table-row-click', val, this.total, this.columns);
        }
      }
    },
  },
  methods: {
    acculate (key) {
      const lists = this.lists;
      return lists.reduce((acc, v) => {
        acc += (Number(restoreFormatNumber(v[key])) || 0);
        return acc;
      }, 0)
    },
    loadMore(tree, treeNode, resolve) {
      this.$emit('loadMore', tree, treeNode, resolve);
    }
  },
}
</script>
